<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1200px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
            position:relative;
        }

        div li {
            width: 1200px;
            height: 400px;
            /* float: left; */
            position:absolute;
        }

        div ul {
            width: 1300px;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    var box=document.getElementById("box");
    var ul=box.children[0];
    var lisul=ul.children;
    for (var i = 0; i <lisul.length; i++) {
        lisul[i].index=i;
        lisul[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";
        lisul[i].style.left=i*240+"px";
        lisul[i].onmouseover=function(){
            for (var i = 0; i <lisul.length; i++) {

                if (i<=this.index) {
                    animate(lisul[i],{"left":i*100});
                }else{
                    animate(lisul[i],{"left":i*100+700});
                }
                // animate(lisul[i],{"width":100});
            }
            // animate(lisul[this.index],{"width":800});
        }
        lisul[i].onmouseout=function(){
//             for (var i = 0; i <lisul.length; i++) {
//                 animate(lisul[i],{"width":240});
//             }
        }

    }



    function animate(tag,obj){
        clearInterval(tag.timer);
        tag.timer = setInterval(function () {
            var flag=true;
            for (var key in obj) {
                var leader = parseInt(fun(tag,key))||0;
                var target=obj[key];
                var step = (target - leader) / 10;
//                if(step>0){
//                    step=Math.ceil(step);
//                }else{
//                    step=Math.floor(step);
//                }
                step = step>0?Math.ceil(step):Math.floor(step);
                leader = leader + step;
                tag.style[key] = leader + "px";
                if(leader != target){
                    flag=false;
                }
            }
            if (flag) {
                clearInterval(tag.timer);
            }
        }, 17)
    }
    function fun(tag,attr){
        if(tag.currentStyle){
            return tag.currentStyle[attr];
        }else{
            return getComputedStyle(tag,null)[attr];
        }

    }







</script>
</body>
</html>
